<template>
  <div class="app-container channel-conflict">
    <el-table
        :data="tableData"
        border
        @cell-click="cellclick"
        :cell-style="cellStyle">
        <el-table-column
        align="center"
        prop="desc"
        >
            <template slot="header">
                <span>{{$t('edge.phase.title')}}</span>
            </template>
            <template slot-scope="scope">
            <div>{{scope.row.desc}}</div>
            </template>
        </el-table-column>
        <el-table-column
        v-for="(item,index) in tableData"
        :key="index"
        align="center"
        prop="date"
        :label="item.desc">
        </el-table-column>
    </el-table>
    <div style="margin-top:10px; float: right;">
        <el-button type="primary" @click="empty">{{$t('edge.channel.empty')}}</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      row: '',
      column: '',
      colorArray: [],
      selectList: [],
      signLocationList: [
        {
          value: 0,
          label: this.$t('edge.channel.direction0')
        },
        {
          value: 1,
          label: this.$t('edge.channel.direction1')
        },
        {
          value: 2,
          label: this.$t('edge.channel.direction2')
        },
        {
          value: 3,
          label: this.$t('edge.channel.direction3')
        },
        {
          value: 4,
          label: this.$t('edge.channel.direction4')
        },
        {
          value: 5,
          label: this.$t('edge.channel.direction5')
        },
        {
          value: 6,
          label: this.$t('edge.channel.direction6')
        },
        {
          value: 7,
          label: this.$t('edge.channel.direction7')
        }
      ],
      turnOptions: [
        {
          value: 0,
          label: this.$t('edge.channel.turn0')
        },
        {
          value: 1,
          label: this.$t('edge.channel.turn1')
        },
        {
          value: 2,
          label: this.$t('edge.channel.turn2')
        },
        {
          value: 3,
          label: this.$t('edge.channel.turn3')
        },
        {
          value: 4,
          label: this.$t('edge.channel.turn4')
        },
        {
          value: 5,
          label: this.$t('edge.channel.turn5')
        },
        {
          value: 6,
          label: this.$t('edge.channel.turn6')
        },
        {
          value: 7,
          label: this.$t('edge.channel.turn7')
        }
      ],
      channeltypeOptions: [
        {
          value: 0,
          label: this.$t('edge.channel.type0')
        },
        {
          value: 1,
          label: this.$t('edge.channel.type1')
        },
        {
          value: 2,
          label: this.$t('edge.channel.type2')
        },
        {
          value: 3,
          label: this.$t('edge.channel.type3')
        },
        {
          value: 4,
          label: this.$t('edge.channel.type4')
        }
      ],
      tableData: []
    }
  },
  computed: {
    ...mapState({
      channelGreenConflictInfo: state => state.globalParam.tscParam.channelGreenConflictInfo
    })
  },
  created () {
    // console.log(this.channelGreenConflictInfo, 'channelGreenConflictInfo')
    this.globalParamModel = this.$store.getters.globalParamModel
    let channel = this.globalParamModel.getParamsByType('channelList')
    this.tableData = channel.map(item => {
      return {
        id: item.id,
        desc: item.id + '-' + this.getTypeDesc(item.type) + '-' + this.getDirection(item.direction) + this.getTurnDesc(item.turn)
      }
    })
  },
  methods: {
    empty () {
      this.colorArray = []
      this.globalParamModel.deleteParams('channelGreenConflictInfo')
    },
    getTurnDesc (val) {
      let turnDesc = this.turnOptions.filter((v) => val.some((item) => item === v.value))
      return turnDesc.map((j) => {
        return j.label
      }).join(',')
    },
    getDirection (val) {
      if (val === undefined || val === '') return
      let directioDesc = this.signLocationList.filter(item => item.value === val)[0]
      return directioDesc.label
    },
    getTypeDesc (val) {
      if (val === undefined || val === '') return
      let typeDesc = this.channeltypeOptions.filter(item => item.value === val)[0]
      return typeDesc.label
    },
    cellclick (row, column, cell, event) {
      if (!column.label) return
      if (row.desc === column.label) return
      let obj = {
        id: row.id,
        row: row,
        column: column
      }
      if (JSON.stringify(this.colorArray).includes(JSON.stringify(obj)) === false) {
        this.colorArray.push(obj)
      } else {
        for (let i = 0; i < this.colorArray.length; i++) {
          if (this.colorArray[i].id === row.id && column.label === this.colorArray[i].column.label) {
            this.colorArray.splice(this.colorArray.findIndex(i => (i.id === row.id && i.column.label === column.label)), 1)
          }
        }
      }
      this.selectList = this.colorArray.map(item => {
        return {
          id: item.id,
          desc: item.row.desc,
          label: Number(item.column.label.replace(/[^0-9]/ig, ''))
        }
      })
      this.cpmputeList(this.selectList)
    },
    cpmputeList (val) {
      let map = {}
      let dest = []
      for (let i = 0; i < val.length; i++) {
        let ai = val[i]
        if (!map[ai.id]) {
          dest.push({
            channelid: ai.id,
            greenconflict: [ai.label]
          })
          map[ai.id] = ai
        } else {
          for (let j = 0; j < dest.length; j++) {
            let dj = dest[j]
            if (dj.channelid === ai.id) {
              dj.greenconflict.push(ai.label)
              dj.greenconflict.sort()
              break
            }
          }
        }
      }
      this.globalParamModel.deleteParams('channelGreenConflictInfo')
      this.globalParamModel.addParamsChannelGreen('channelGreenConflictInfo', dest)
      console.log(dest, 'desc')
    },
    cellStyle (row, rowIndex, column) {
      if (!row.column.label) return
      //   let label = Number(row.column.label.replace(/[^0-9]/ig, ''))
      for (let i = 0; i < this.colorArray.length; i++) {
        if (this.colorArray[i].row === row.row && this.colorArray[i].column === row.column) {
          return 'background-color:red;'
        }
        // if (this.channelGreenConflictInfo[i].channelid === row.row.id && this.channelGreenConflictInfo[i].greenconflict.includes(label)) {
        //   return 'background-color:red;'
        // }
      }
    }
  }
}
</script>

<style>

</style>
